<template>
    <div class="dear-guest-wrap">
        <div class="introduce-banner"></div>
        <ul class="nav">
            <li v-for="(nav, index) in homeData.navLists" :class="{ 'nav-active': nav.active }"
                @touchend="toggleNav(index)">{{ nav.name }}
        </ul>
        <div class="content">
            <div class="client-confirm" v-show="homeData.activeDir === 'left'">
                <ul>
                    <li class="flex-box"><span>保险期限</span>
                        <button class="btn-active btn-w50 button">1年</button>
                    </li>
                    <li class="flex-box"><span>保费金额</span>
                        <button class="btn-active button btn-w50">免费</button>
                    </li>
                </ul>
                <div class="insur-content">
                    <h2 class="title">保障内容</h2>
                    <ul>
                        <li class="flex-box">
                            <div class="yes-icon">航空意外全残或身故 <span class="color-yellow">1000万</span></div>
                        </li>
                        <li class="flex-box">
                            <div class="yes-icon">自驾车意外全残或身故 保额<span class="color-yellow">10万</span> 法定节假日<span class="color-yellow">30万</span></div>
                        </li>
                        <li class="flex-box">
                            <div class="yes-icon">公共交通意外全残或身故 保额<span class="color-yellow">10万</span> 法定节假日<span class="color-yellow">30万</span></div>
                        </li>
                    </ul>
                    <p class="info">说明：仅年满18周岁的被保险人享有自驾车和公共交通意外责任</p>
                    <p class="pdf">保险详情阅读
                        <router-link :to="{ name: 'protocol', params: { file: 'agreemeng_qwzl_ywx.pdf', backPath: '/qwzl/index' } }">
                            《平安千万尊旅意外伤害保险》
                        </router-link>
                        所涉及条款
                    </p>
                </div>
                <div class="client-info">
                    <h2 class="title">请您输入信息后，点【免费领取】</h2>
                    <ul>
                        <li class="flex-box"><span>姓名</span> <input type="text" v-model.trim="params.username"
                                                                    placeholder="请输入您的真实姓名" class="right"></li>
                        <li class="flex-box"><span>证件类型</span> <span class="right">
                <select style="direction:rtl" v-model="params.cardType">
                  <option v-for="item in homeData.cardTypeItems" :value="item.val">{{item.name}}</option>
                </select>
              <div class="collapse"><div class="collapseArrow right"></div></div></span></li>
                        <li class="flex-box"><span>证件号码</span> <input type="text" v-model.trim="params.cardId"
                                                                      placeholder="请输入您的证件号码" class="right"></li>
                    </ul>
                </div>
            </div>
            <div class="pro-intro" v-show="homeData.activeDir === 'center'">
                <img src="~assets/img/dearGuest/proDetail.png" width="100%">
            </div>
            <div class="insur-exam" v-show="homeData.activeDir === 'right'">
                <img src="~assets/img/dearGuest/insurExam.png" width="100%">
            </div>
        </div>
        <footer-bar></footer-bar>
    </div>
</template>
<script>
    import { API } from 'config'
    import { mapGetters, mapActions, mapMutations } from 'vuex'
    import FooterBar from 'components/footerBar'
    import checker from 'lib/checker'

    export default {
        name: 'Introduce',
        data() {
            return {
                params: {
                  username: '',
                  cardType: 1,
                  cardId: ''
                },
                query: (() => {
                    if (Object.keys(this.$route.query).length) {
                        localStorage.setItem('query', JSON.stringify(this.$route.query))
                        return this.$route.query
                    }
                    else {
                        return JSON.parse(localStorage.getItem('query'))
                    }
                    return {}
                })(),
                hash: ''
            }
        },
        components: {
          FooterBar
        },
        created() {
            (() => {
            })()
        },
        computed: {
            ...mapGetters(['homeData'])
        },
        methods: {
          ...mapActions(['toggleNav', 'closeMyWeChat', 'showMyWeChat', 'showLoading', 'hideLoading', 'showAlert', 'hideAlert']),
          toggleNav: function (index) {
            this.$store.dispatch('toggleNav', index)
          },
          freeGet: function () {
            //默认身份证
            let validCardType = checker.checkIdNo(this.params.cardId)
            switch (this.params.cardType) {
              case 0: {
                //户口本 同身份证,修改提示
                validCardType = validCardType && validCardType.replace(/身份证/g, '户口本')
                break;
              }
              case 2: {
                validCardType = checker.checkPassport(this.params.cardId)
                break;
              }
              case 3: {
                validCardType = checker.checkMilitaryCard(this.params.cardId)
                break;
              }
              case 6: {
                validCardType = checker.checkGangAoCard(this.params.cardId)
                break;
              }
              case 'A': {
                validCardType = checker.checkBornCard(this.params.cardId)
                break;
              }
            }
            let ruleResult = [checker.checkNameBeneficiary(this.params.username),
                      //checker.isEmpty(this.params.cardType, '请选择证件类型'),
                      validCardType].some((rule) => {
               rule && this.$store.dispatch('showAlert', rule)
               return rule
            })
            if (ruleResult) {
              return
            }
            this.$http.post(`${API}/freeReceiveValidate.shtml`, {
                clientName: this.params.username,
                idType: this.params.cardType,
                idNo: this.params.cardId,
                agentNo: decodeURIComponent(this.query.agentNo),
                agentName: decodeURIComponent(this.query.name),
                planCode: decodeURIComponent(this.query.planCode),
                regionCode: decodeURIComponent(this.query.regionCode)
              })
              .then((response) => {
                let result = JSON.parse(response.body)
                if (result.checkFlag === 'Y') {
                  // 手机号截取后面11位
                  result.mobileNo && (result.mobileNo = result.mobileNo.replace(/-*/g, '').substr(-11, 11))
                  sessionStorage.setItem('indexData', JSON.stringify(result))
                  setTimeout(() => {
                    this.$router.push('/qwzl/insure')
                  }, 300)
                } else {
                  this.$store.dispatch('showAlert', result.checkMessage || result.message || '')
                }
              })
              .catch(function(response) {
                this.$store.dispatch('showAlert', '哎呀，系统开小差了，请刷新页面后重新领取~')
              })
          }
        }
    }

</script>
<style lang="scss" scoped>
    .dear-guest-wrap {
        color: #333;
        padding-bottom: 1.2rem;
        .btn-w50 {
            width: 1rem;
        }
        .nav {
            margin-bottom: 0.1rem;
            background: #fff;
            width: 100%;
            font-size: 0.36rem;
            li {
                display: inline-block;
                width: 33.3%;
                text-align: center;
                border-bottom: 2px solid transparent;
                position: relative;
                padding: 0.2rem 0;
                &.nav-active {
                    border-bottom: 2px solid #eb520e;
                    color: #eb520e;
                    &:after {
                        content: '';
                        display: block;
                        position: absolute;
                        left: 49%;
                        bottom: 0;
                        width: 0;
                        height: 0;
                        border: 0.05rem solid transparent;
                        border-bottom-color: #eb520e;
                    }
                }
            }

        }
        .content {
            background: #fff;
            font-size: 0.34rem;
            li {
                border-bottom: 1px solid #e0e0e0;
            }
            .insur-content {
                border-bottom: 1px solid #e0e0e0;
                padding-left: 0.3rem;

                .title {
                    padding-left: 0;
                }
                li {
                    color: #666;
                    border: none;
                    font-size: .28rem;
                    padding-bottom: 0;
                    padding-right:0;
                    /*span {*/
                        /*color: #eb520e;*/
                    /*}*/
                }
                .info {
                    font-size: 0.22rem;
                    padding: 0.1rem 0.3rem 0.26rem 0.3rem;
                    color: #999;
                }
                .pdf {
                    font-size: 0.24rem;
                    border-top: 1px solid #e0e0e0;
                    padding-left: 0.3rem;
                    line-height: 0.9rem;
                    color: #eb520e;
                }
            }
            .title {
                padding: 0.2rem 0.3rem;
                border-bottom: 1px solid #e0e0e0;
            }
            .client-info {
                .layout {
                    color: #666;
                    font-size: 0.32rem;
                }
                .right {
                    font-size: 0.28rem;
                    color: #999;
                }
            }
            .pro-intro, .insur-exam {
                padding: 0.26rem 0.3rem;
            }
        }
        .modal-container {
            width: 80%;
            background: #fff;
            margin: 0 auto;
            padding: 0.5rem .5rem .2rem;
            position: relative;
            .item {
                display: -webkit-box;
                -webkit-box-align: center;
                -webkit-box-pack: center;
                font-size: 0.28rem;
                margin-bottom: 0.3rem;
                .avatar, .QR {
                    width: 1rem;
                    height: 1rem;
                    margin-right: 0.2rem;
                }
                img {
                    width: 100%;
                    height: 100%;
                }
                .avatar img {
                    border-radius: 50%;
                }
                .name {
                    font-size: 0.32rem;
                    margin-right: 0.5rem;
                }
                .box-item {
                    display: block;
                    -webkit-box-flex: 1
                }
            }
        }
    }

    .introduce-banner {
        background: url(~assets/img/dearGuest/banner.png) 0 0 no-repeat;
        background-size: cover;
    }
</style>
